Bootstrap的表单样式内容

#Bootstrap的表单样式内容| 来源: 网络整理| 查看: 265

Bootstrap提供了一些表单控件样式、布局选项，以及用来创建广泛多样化的的表单的自定义组件。

示例

确保在输入框上使用正确的type属性（如email用于电子邮件地址或number用于数字录入) 从而利用较新的录入控制，包括诸如电子邮件验证、号码选择等。

经典示例：

文本控件（如、、）：统一采用.form-control样式进行处理优化，包括常规外观、focus选（点）中状态、尺寸大小等。

文件选择控件：对于input文件选择控件，Bootstrap v4采用.form-control-file取代了.form-control。

只读属性：在input控件上增加readonly（布尔值）标签定义，以防止修改input中的值。仅能阅读的input控件显示较谈（就象禁用的输入框），但保留鼠标效果。

只读纯文本：如果你希望将属性进一步处理，显示为纯文本（没有控件框），你只要引用.form-control-plaintextclass样式，就能移除预设的表单样式，并保留适当的边距和填充间隙。

滑动：使用设置水平滚动范围输入.form-control-range。

用户名用户名需要用英文、符号组成密码确认密码所在地北京上海广州深圳选择文件滑块

复选框与单选框

使用.form-check可以格式化复选框和单选框按钮，用以改进它们的默认布局和动作呈现，复选框用于在列表中选择一个或多个选项，单选框则用于多许多选项中选择一个。

复选框和单选框也是可以禁用的，只要not-allowed在父级的悬停上提供定义，需要将该.disabled类添加到父级.form-check，同时控件也会淡化文字颜色以灰色显示禁用状态。

兴趣爱好：吃饭睡觉打豆豆性别：男女提交

表单的尺寸

使用.form-control-lg、.col-form-label-lg和.form-control-sm、.col-form-label-sm属性定控件大小高度。

大尺寸的下拉框正常尺寸的下拉框小尺寸的下拉框

只读属性

在input控件上增加readonly（布尔值）标签定义，以防止修改input中的值。仅能阅读的input控件显示较谈（就象禁用的输入框），但保留鼠标效果。

没有标签

添加.position-static到.form-check选择器上，可以实现没有文本的输入，记住：仍然要为辅助浏览（友好访问）提供相应标签，如使用aria-label定义。

表单栅格排列

可使用我们的栅格系统构建更复杂的表单，包括建立多列、多种宽度和其它对齐选项的布局。

表格式排列

你也可以使用.form-row来取代.row（它们二者很多时候可以互换使用），因为.form-row提供更小的沟槽缝隙。

栅格系列例子： Email Password 家庭地址公司地址城市婚姻状况已婚未婚学历博士硕士本科大专高中同意所读内容提交

水平排列

通过添加.form-check-inline到任何一个组，会使加到任何.form-check中的选取框平行排列。

Email Password 兴趣爱好：吃饭睡觉打豆豆性别：男女

内联表单

使用.form-inline样式在单个水平行上显示一系列标签，表单控件和按钮。

Bootstrap的表单样式内容 body { padding-bottom: 1000px; } 用户名：密码：记住我提交

表单验证

Bootstrap中验证机制如下：

HTML表单验证通过CSS的两个伪类应用::invalid以及:valid。它适用于、、元素。Bootstrap ::invalid 和 :valid 樣式在 .was-validated ，通常会反馈到，否则必填的内容在加载的过程中会显示无效，这个方法你呆以选择在任何时候启用它（通过是在尝试提交表单后）。作为备用，.is-invalid 和 .is-valid类别可以用来代替伪类用于服务器端验证。他们不需要.server side validation定义在父层上。由于CSS的工作原理限制，我们无法（现在）将样式应用于DOM中的表单控制组件之前的上，而不需要使用自用自定义JavaScript。所有现代浏览器都支持约束验证API，这是一系列用于验证表单控件的JavaScript方法。反馈消息可能会使用浏览器默认值（每个浏览器不同，通过私有CSS样式）或其他HTML和CSS的自定义反馈样式。你可以在JavaScript中使用setCustomValidity 提供有效自定义消息。

对于自定义Bootstrap表单验证消息，您需要将novalidate属性添加到您的。

:invalid和:valid的样式应用于表单控件。

姓验证通过！验证失败！名验证通过！用户名请输入正确的用户名！家庭地址请输入正确的家庭地址！公司地址请输入正确的公司地址！同意所读内容你必需同意此内容后才能继续操作！提交 (function(){ var forms=document.querySelectorAll('.needs-validation'); forms.forEach(function(form,index){ form.addEventListener('submit',function(ev){ //console.log(1); if(form.checkValidity()===false){ //如果表单验证成功，那这个方法会返回true ev.preventDefault(); ev.stopPropagation(); } form.classList.add('was-validated'); //提交事件发生后，不管验证是否成功，都需要给form身上添加这个class }); }); })();

自定义表单

为了使自定义表单和跨浏览器保持一致性，请使用自定义的表单元素来替换浏览器的默认值，它们建立在语义和具备友了的标记之上，因此它们是可以替代任何默认表单控制元件的。

吃饭男女男女城市北京上海广州滑块有范围的滑块规定步长的滑块 Choose fild

【本文地址】

公司简介

联系我们